<template>
 <Modal :title="title" @on-cancel="onClickCancel" v-model="isShow" fullscreen>
  <Form :label-width="100" :rules="rules" ref="form" :model="form">
    <FormItem label="选择商品" class="wp80" prop="skuId" v-if="isAdd">
      <ProductSelect ref="product-select" v-model="form.skuId"/>
    </FormItem>
    <FormItem label="选择商品" class="wp80" v-else>
       <Input v-model="form.productName" :disabled="true" />
    </FormItem>
    <FormItem label="选择门店"  class="require-nature" v-if="isAdd">
      <Department ref="department"/>
    </FormItem>
    <FormItem label="选择门店" class="wp80" v-else>
       <Input v-model="form.storeName" :disabled="true" />
    </FormItem>
    <FormItem label="限购数量" prop="limitNum">
      <InputNumber class="w150" v-model="form.limitNum" :min="1" :max="9999" ></InputNumber>
    </FormItem>
  </Form>
  <Loader :status="status" @refresh="getData"></Loader>
  <div slot="footer">
    <Button size="large"  @click="onCancel">取消</Button>
    <Button size="large" :disabled="disabled" type="primary" @click="onSave">确定</Button>
  </div>
 </Modal>
</template>
<script>
import { mapGetters } from 'vuex'
import ProductSelect from '~/ProductSelect'
import Department from './Department'
export default {
  components: {
    ProductSelect,
    Department
  },
  data() {
    return {
      id: this.$route.query.id,
      isShow: false,
      status: 'pass',
      disable: false,
      title: '新增门店限购',
      list: [],
      itemId: '',
      loading: false,
      isAdd: true,
      form: {
        skuId: null,
        productName: '',
        storeIdList: [],
        storeId: null,
        storeName: '',
        limitNum: ''
      },
      rules:{
        skuId: [{ required: true, message: '请选择商品', trigger: 'change' }],
        limitNum: [{required: true, message: '请设置限购数量', type: 'number', trigger: 'change'}]
      }
    }
  },
  methods: {
    setShowMotal(row, index) {
      if (row !== 1) {
        this.isAdd = false
        this.form.storeName = row.item.storeName
        this.form.productName = row.item.productName
        this.form.storeIdList = row.item.storeIdList
        this.form.storeId = row.item.storeId
        this.form.skuId = row.item.skuId
        this.form.limitNum = row.item.limitNum
        this.itemId = row.item.id
        this.title ='修改规格限购'
      } else { // 新增
        this.form.storeName = ''
        this.form.productName = ''
        this.form.storeIdList = []
        this.form.storeId = null
        this.form.skuId = null
        this.form.limitNum = null
        this.isAdd = true
        this.itemId = ''
        this.title = '新增规格限购'
        this.$refs['product-select'].remote()
        this.$refs['form'].resetFields()
        this.$refs['department'].reset()
      }
      this.isShow = true
    },
    onSave() {
      let hasList = []
      if (!this.itemId) {
        hasList =  this.$refs['department'].hasList
        if (!hasList.length) {
          this.$Notice.warning({
            title: '温馨提示',
            desc: '请选择门店'
          })
          return
        }
        if (hasList.length > 200) {
          this.$Notice.warning({
            title: '温馨提示',
            desc: '选择的门店不能超过200家'
          })
          return
        }
      }
      this.disable =  true
      let params = {
        activityId: this.$route.query.id,
        storeIdList: this.itemId ? [] : hasList.map(item => item.storeId),
        skuId: this.form.skuId,
        limitNum: this.form.limitNum
      }
      let url = '/activity/factory_info/sku/exceptional/save'
      if (this.itemId) {
        params.id = this.itemId
        params.storeId =  this.form.storeId
        url = '/activity/factory_info/sku/exceptional/edit'
        delete params.storeIdList
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          this.status = 'loading'
          this.$jsonPost(url, params).then(res => {
            this.$emit('complete')
            this.status = 'pass'
            this.disable = false
            this.$Notice.success({
              desc: '保存成功'
            })
            this.isShow = false
          }).catch(error => {
            this.status = 'pass'
            this.disable = false
          })
        } else {
          this.disable = false
        }
      })
    },
    onCancel() {
      this.isShow = false
      this.$refs['form'].resetFields()
    }
  }
}
</script>